<!-- model模型 -->
<template>
  <div class="container-model">
    <!-- <button class="demo-btn" @click="consoleViewer">打印视点</button>
    <button class="demo-btn1" @click="zoomIn">放大模型</button>
    <button class="demo-btn2" @click="zoomOut">缩小模型</button>
     <button class="demo-btn3" @click="render">重新渲染</button>
     <button class="demo-btn4" @click="toComponents">定位构件</button>
     <button class="demo-btn5" @click="toComponents2">定位构件2</button>
     <button class="demo-btn6" @click="showC">显示构件</button>
     <button class="demo-btn6" @click="consoleViewer">打印视点</button> -->
    <div class="wrapper">
      <div ref="model" class="model"></div>
    </div>
  </div>
</template>

<script type='textecmascript-6'>
  //接口
  import { GetViewToken, GetDefaultModelID } from "@/api/api.js";
  import method from './module/methods.js'
  import watchs from './module/watch.js'
  // vuex
  import { mapMutations } from "vuex";
  export default {
    mixins: [method, watchs],
    props: {
      // ElementIDs: { type: Array },
      // functionNumber: { type: Array },// 函数序号
      // widthAndHeight: { type: Object },//模型大小
      // highLightElementIDs: { type: Array },//高亮某构件的ID数组
      // modelData: { type: Object }  //模型数据对象
      BuildingID:{ type: [String,Number] },//查看 显示哪个楼栋
    },
    data () {
      return {
        viewer3D: {}, // 3D模型实例
        viewToken: "", //binface视图token，12小时过期
        projectID: localStorage.getItem('projectid'),//临时项目ID
        marker: {}  //标签对象
      };
    },
    created () {
      console.log(this.widthAndHeight)
      this._initData();
    },
    methods: {
      /**
       * 初始化
       */
      async _initData () {
        // // 获取viewToken
        this.viewToken = await this.getDataBySessionStorage(GetViewToken, { projectID: this.projectID }, "viewToken", true);
        // /* eslint-disable */
        let options = new BimfaceSDKLoaderConfig();
        console.log("BIMface 模型DOM", options);
        options.viewToken = this.viewToken;
        BimfaceSDKLoader.load(options, this.successCallback, this.failureCallback);
      },
      /* eslint-disable */
      successCallback (viewMetaData) {
        if (viewMetaData.viewType == "dwgView") {
          console.log("2D模型");
        } else if (viewMetaData.viewType == "3DView") {
          //进阶配置
          let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
          webAppConfig.domElement = this.$refs.model;
          // 创建WebApplication
          let app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
          // 添加待显示的模型
          app.addView(this.viewToken);
          // 从WebApplication获取viewer3D对象
          this.viewer3D = app.getViewer();
          // this.$toast.clear()


          //高级配置
          // 配置参数
          // var config = new Glodon.Bimface.Viewer.Viewer3DConfig()
          // config.domElement = this.$refs.model;
          // // 获取DOM元素
          // // var WebAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
          // // 创建viewer3D对象
          // this.viewer3D = new Glodon.Bimface.Viewer.Viewer3D(config)
          // // 添加模型
          // this.viewer3D.addView(this.viewToken);
          // // 监听模型加载中
          // this.viewer3D.addEventListener(
          //   Glodon.Bimface.Viewer.Viewer3DEvent.ViewLoading,
          //   e => {
          //     this.modelLoading() // 模型加载中...
          //   }
          // );
          // 监听添加view完成的事件
          this.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, () => {
            // 渲染3D模型
            
            // this.viewer3D.enableMouseHoverHighlight(); //允许鼠标hover构件时高亮
            // this.isViewAdded = true; //模型加载完成状态
            // this.$store.commit('IS_VIEW_ADDED', true)
            // 将模型实例放在状态管理，全局可访问
            // this.getview3d(1)

            // this.setCameraStatus()
            console.log(this.viewer3D,this.viewer3D.__proto__)
            this.viewer3D.getModelTree((e)=>{
              console.log(e)
            })
            // let a = this.viewer3D.getObjectDataById('1606713069142912.544992')
            // console.log(a)
            switch(this.BuildingID){
              case '全部':
                break
              case 1:
                /**
                 * showExclusiveComponentsByObjectData方法说明：
                 * 如果模型是按需加载模型，则在实例化之后，调用showExclusiveComponentsByObjectData方法才显示模型
                 * 否则在实例化之后就显示模型
                 * 获者要通过右健显示全部构件
                 */
                
                this.viewer3D.showExclusiveComponentsByObjectData([
                  {specialty: "单体1建筑模型"},{specialty: "单体1结构模型"},{specialty: "单体2暖通模型"},
                ])
                break
              case 2:
                this.viewer3D.showExclusiveComponentsByObjectData([
                  {specialty: "单体2结构模型"},
                ])
                break
            }
            this.viewer3D.render();
            // this.$toast.clear()
          });
          /**
           * 鼠标左键点击事件
           * 返回点击对象
           */
          this.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, e => {
            console.log(e);
            // this.$store.commit("VIEWER_3D", e);
          });
          /**
          * 构件选中状态变化
          * 返回点击对象
          */
          this.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.SelectionChanged, e => {
            this.$store.commit("SELECT_ALLID", e);
          });
          //三维标签的配置类
          let markerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainerConfig();
          markerConfig.viewer = this.viewer3D;
          this.marker = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainer(markerConfig);
        } else if (viewMetaData.viewType == "drawingView") {
          console.log("矢量图纸");
        } else if (viewMetaData.viewType == "rfaView") {
          console.log("族文件");
        }
      },

      failureCallback (error) {
        console.log("失败");
        this.$message({ type: "error", message: "模型加载失败", center: "true" });
      },
      ...mapMutations({
        getview3d: "VIEWER_3D"
      }),

      // //打钱视点
      // consoleViewer(){
      //   var viewer3D = this.$store.state.viewer3D
      //   let Viewer = viewer3D.getCameraStatus() // 获取当前模型初始视点位置信息
      //   console.log(JSON.stringify(Viewer))
      // },
      // zoomIn(){
      //   this.viewer3D.zoomIn()
      // },
      // zoomOut(){
      //   this.viewer3D.zoomOut()
      // },
      // render(){
      //   this.viewer3D.resize(1500, 1000)
      //   this.viewer3D.render()
      // },
      // toComponents(){
      //   console.log(this.ElementIDs)
      //   this._positioningComponents(this.ElementIDs)
      // },
      // toComponents2(){
      //   console.log(this.ElementIDs)
      //   this.positioningComponentsHidden(this.ElementIDs)
      // },
      // showC(){
      //   this.showComponentsById(this.ElementIDs)
      // }
    },

  };
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
  .container-model {
    width: 100%;
    height: 100%;
    font-size: 16px;

    .wrapper {
      width: 100%;
      height: 100%;

      .model {
        width: 100%;
        height: 100%;
      }
    }

    .demo-btn {
      position: absolute;
      top: 20px;
      right: 300px;
      z-index: 99;
    }

    .demo-btn1 {
      position: absolute;
      top: 20px;
      right: 400px;
      z-index: 99;
    }

    .demo-btn2 {
      position: absolute;
      top: 20px;
      right: 500px;
      z-index: 99;
    }

    .demo-btn3 {
      position: absolute;
      top: 20px;
      right: 600px;
      z-index: 99;
    }

    .demo-btn4 {
      position: absolute;
      top: 20px;
      right: 700px;
      z-index: 99;
    }

    .demo-btn5 {
      position: absolute;
      top: 20px;
      right: 800px;
      z-index: 99;
    }

    .demo-btn6 {
      position: absolute;
      top: 20px;
      right: 900px;
      z-index: 99;
    }
  }
</style>